<template>
  <div class="indicator-config-tree">
    <!-- 头部按钮区域 -->
    <div class="tree-header">
      <el-button 
        type="primary" 
        size="small" 
        @click="handleSelectAll"
      >
        全选
      </el-button>
      <el-button  
        size="small" 
        @click="handleClearAll"
      >
        清空
      </el-button>
    </div>
    
    <el-tree
      ref="treeRef"
      :data="treeData"
      :props="treeProps"
      node-key="pkid"
      :expand-on-click-node="false"
      :highlight-current="true"
      @node-click="handleNodeClick"
      :check-strictly="true"
      show-checkbox
    >
      <template #default="{ data }">
        <span class="tree-node">
          <span class="node-label">{{ data.areaName }}</span>
          <!-- <span v-if="data.count" class="node-count">({{ data.count }})</span> -->
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script>
import { queryDistrict } from '@/api/screen-management/indicator-config'

export default {
  name: 'IndicatorConfigTree',
  data() {
    return {
      treeProps: {
        children: 'children',
        label: 'areaName'
      },
      treeData: [
        {
          id: 'economic',
          label: '经济发展',
          count: 5,
          children: [
            {
              id: 'gdp',
              label: 'GDP指标',
              count: 3
            },
            {
              id: 'industry',
              label: '产业发展',
              count: 2
            }
          ]
        },
        {
          id: 'social',
          label: '社会发展',
          count: 8,
          children: [
            {
              id: 'population',
              label: '人口指标',
              count: 4
            },
            {
              id: 'education',
              label: '教育指标',
              count: 4
            }
          ]
        },
        {
          id: 'environment',
          label: '环境质量',
          count: 6,
          children: [
            {
              id: 'air',
              label: '空气质量',
              count: 3
            },
            {
              id: 'water',
              label: '水质指标',
              count: 3
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.getDistrict()
  },
  methods: {
    getDistrict() {
      const params = {
        level: -1
      }
      queryDistrict(params).then(res => {
        this.treeData = res.data
        // 数据加载完成后触发事件
        this.$emit('data-loaded', this.treeData)
      })
    },
    handleNodeClick(data, node) {
      this.$emit('node-click', data, node)
    },
    
    // 获取选中的节点
    getCurrentNodeCheck() {
      const currentNode = this.$refs.treeRef.getCheckedNodes()
      return currentNode
    },

    getCurrentNode() {
      const currentNode = this.$refs.treeRef.getCurrentNode()
      return currentNode
    },
    
    // 设置当前选中节点
    setCurrentKey(key) {
      this.$refs.treeRef.setCurrentKey(key)
    },
    
    // 获取当前树的数据结构（调试用）
    getTreeData() {
      return this.treeData
    },
    
    // 清空所有选中状态
    clearCheckedNodes() {
      this.$refs.treeRef.setCheckedNodes([])
    },
    
    // 全选所有节点
    handleSelectAll() {
      if (this.treeData && this.treeData.length > 0) {
        // 获取所有节点的pkid
        const allNodeIds = this.getAllNodeIds(this.treeData)
        // 设置所有节点为选中状态
        this.$refs.treeRef.setCheckedKeys(allNodeIds)
        // this.$message.success('已全选所有节点')
      }
    },
    
    // 清空所有选中
    handleClearAll() {
      this.$refs.treeRef.setCheckedKeys([])
      // this.$message.success('已清空所有选中')
    },
    
    // 递归获取所有节点的pkid
    getAllNodeIds(nodes) {
      const ids = []
      const traverse = (nodeList) => {
        nodeList.forEach(node => {
          if (node.pkid) {
            ids.push(node.pkid)
          }
          if (node.children && node.children.length > 0) {
            traverse(node.children)
          }
        })
      }
      traverse(nodes)
      return ids
    }
  }
}
</script>

<style lang="scss" scoped>
.indicator-config-tree {
  height: 100%;
  
  .tree-header {
    // padding: 8px 0px;
    border-bottom: 1px solid #e4e7ed;
    display: flex;
    gap: 8px;
    background-color: #fafafa;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    
    .el-button {
      flex: 1;
    }
  }
  
  :deep(.el-tree) {
    .tree-node {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      
      .node-label {
        font-size: 13px;
        color: #303133;
      }
      
      .node-count {
        font-size: 12px;
        color: #909399;
        background-color: #f0f2f5;
        padding: 2px 6px;
        border-radius: 10px;
        margin-left: 8px;
      }
    }
    
    .el-tree-node {
      &.is-current > .el-tree-node__content {
        background-color: #e6f7ff;
        color: #1890ff;
        
        .tree-node .node-label {
          color: #1890ff;
          font-weight: 500;
        }
      }
      
      .el-tree-node__content:hover {
        background-color: #f0f2f5;
      }
    }
  }
}
</style>